import { useEffect } from "react";
import './assets/css/app.css';
import { Outlet, useNavigate, useLocation } from "react-router-dom";

function App() {
  
  const navigate = useNavigate();
  const location = useLocation();

  const btnClick = (name) => {
    navigate(name, {
      replace: false
    })
    console.log("name = ", name);
    console.log("location = ", location);
  }

  useEffect(() => {
    console.log("useEffect location = ", location);
  }, [location]);


  return (
    <div className="app-wrap">
      <div className="nav-list-box">
        <button onClick={() => btnClick('/home')}>Home</button>
        <button onClick={() => btnClick('/about')}>About</button>
        <button onClick={() => btnClick('/news')}>News</button>
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  )
}

export default App
